<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车案例</title>
    <link rel="stylesheet" href="./css/10.css">
</head>
<body>
    <div class="car">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" id="">
                        全选
                    </th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>商品数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    </td>
                    <td>
                        <img src="./img/01.jpg" alt="">
                        <p>牛奶</p>
                    </td>
                    <td class="price">5￥</td>
                    <td>
                        <button class="reduce">-</button>
                        <input type="text" class="number" value="1">
                        <button class="add">+</button>
                    </td>
                    <td>
                        <div class="total">5￥</div>
                    </td>
                    <td>
                        <a href="javascript:;" class="del">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    </td>
                    <td>
                        <img src="./img/01.jpg" alt="">
                        <p>牛奶</p>
                    </td>
                    <td class="price">10￥</td>
                    <td>
                        <button class="reduce">-</button>
                        <input type="text" class="number" value="1">
                        <button class="add">+</button>
                    </td>
                    <td>
                        <div class="total">10￥</div>
                    </td>
                    <td>
                        <a href="javascript:;" class="del">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    </td>
                    <td>
                        <img src="./img/01.jpg" alt="">
                        <p>牛奶</p>
                    </td>
                    <td class="price">20￥</td>
                    <td>
                        <button class="reduce">-</button>
                        <input type="text" class="number" value="1">
                        <button class="add">+</button>
                    </td>
                    <td>
                        <div class="total">20￥</div>
                    </td>
                    <td>
                        <a href="javascript:;" class="del">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    </td>
                    <td>
                        <img src="./img/01.jpg" alt="">
                        <p>牛奶</p>
                    </td>
                    <td class="price">35￥</td>
                    <td>
                        <button class="reduce">-</button>
                        <input type="text" class="number" value="1">
                        <button class="add">+</button>
                    </td>
                    <td>
                        <div class="total">35￥</div>
                    </td>
                    <td>
                        <a href="javascript:;" class="del">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="controls">
            <a href="javascript:;" class="delall">删除所选商品</a>
            <a href="javascript:;" class="clearcar">清理购物车</a>
            <p>
                已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
            </p>
            <a href="javascript:;" class="deal">去结算</a>
        </div>
    </div>

    <script src="./js/10.js"></script>
</body>
</html>